<template>
  <div class="yun">
    <div style="width: 70%">
      <div class="todaydata">
        <h3 style="padding: 10px">今日实时数据</h3>
        <hr style="border: 1px solid #eee" />
        <div>
          <div class="today-item">
            <p>231</p>
            <span>付款订单</span>
          </div>
          <div class="today-item">
            <p>￥10000.21</p>
            <span>付款金额</span>
          </div>
          <div class="today-item">
            <p>120311</p>
            <span>活跃用户(今日)</span>
          </div>
          <div class="today-item">
            <p>0.53</p>
            <span>转化率</span>
          </div>
          <div class="today-item">
            <p>￥32.00</p>
            <span>客单价</span>
          </div>
          <div class="today-item">
            <p>122</p>
            <span>新增用户(今日)</span>
          </div>
        </div>
      </div>
      <div class="orderdata">
        <h3 style="padding: 10px">订单统计</h3>
        <hr style="border: 1px solid #eee" />
        <div ref="orderDom" style="width: 100%; height: 300px"></div>
      </div>
      <div class="dealdata">
        <h3 style="padding: 10px">交易统计</h3>
        <hr style="border: 1px solid #eee" />
        <div ref="dealDom" style="width: 100%; height: 300px"></div>
      </div>
    </div>
    <div style="width: 39%; margin-left: 20px">
      <div class="entrance">
        <div style="width: 100%">
          <h3 style="padding: 10px">快捷入口</h3>
          <hr style="border: 1px solid #eee" />
        </div>
        <div class="entrance-item">
          <el-icon style="height: 20px"><CirclePlus /></el-icon>新建商品
        </div>
        <div class="entrance-item">
          <el-icon style="height: 20px"><CirclePlus /></el-icon>商品管理
        </div>
        <div class="entrance-item">
          <el-icon style="height: 20px"><CirclePlus /></el-icon>发货管理
        </div>
        <div class="entrance-item">
          <el-icon style="height: 20px"><CirclePlus /></el-icon>用户申请
        </div>
        <div class="entrance-item">
          <el-icon style="height: 20px"><CirclePlus /></el-icon>订单管理
        </div>
        <div class="entrance-item">
          <el-icon style="height: 20px"><CirclePlus /></el-icon>售后管理
        </div>
      </div>
      <div class="shopsort">
        <div style="width: 100%">
          <h3 style="padding: 10px">商品排行</h3>
          <hr style="border: 1px solid #eee" />
        </div>
        <div class="aaa">
          <div
            class="shopsort-item"
            v-for="(i, j) in [
              { name: '电动牙刷', num: 333456 },
              { name: '俏侬 牛油蛋挞皮 1020g 51个装烘焙食材', num: 79244 },
              { name: '汰渍 Tide 专业温和养护手洗洗衣液600G/瓶', num: 46823 },
              { name: 'LOVO乐蜗家纺60支全棉高支刺绣床上四件套', num: 15398 },
              { name: 'AOC AGON 爱攻3 27英寸', num: 31552 },
              { name: '海天 酱油蚝油 味极鲜特级生抽 1.28L', num: 68851 },
              { name: '光明 纯牛奶250mL*24盒', num: 125689 },
              { name: '光明 纯牛奶250mL*24盒', num: 100568 },
              { name: '光明 纯牛奶250mL*24盒', num: 86472 },
              { name: '光明 纯牛奶250mL*24盒', num: 11235 },
            ].sort((a, b) => b.num - a.num)"
            :key="j"
          >
            <p>
              <span class="serial">{{ j + 1 }}</span>
              <span>{{ i.name }}</span>
            </p>
            <span>{{ i.num.toLocaleString() }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";

let orderDom = ref(null);
let dealDom = ref(null);
let orderData = ref({
  xAxis: {
    type: "category",
    data: ["11/01", "11/02", "11/03", "11/04", "11/05", "11/06", "11/07"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [400, 30, 300, 400, 50, 500, 250],
      type: "line",
    },
  ],
});
let dealdata = ref({
  xAxis: {
    type: "category",
    data: ["11/01", "11/02", "11/03", "11/04", "11/05", "11/06", "11/07"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [3800, 200, 3000, 400, 5000, 2500, 4000],
      type: "line",
    },
  ],
});
onMounted(() => {
  let myOrder = echarts.init(orderDom.value);
  let myDeal = echarts.init(dealDom.value);
  dealdata.value && myDeal.setOption(dealdata.value);
  orderData.value && myOrder.setOption(orderData.value);
});
</script>
<style>
.yun {
  width: 100%;
  padding: 20px;
  display: flex;
  justify-content: space-between;
}
.todaydata {
  width: 100%;
  height: 270px;
  background-color: #fff;
}
.todaydata > div {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
  padding: 20px;
}
.today-item {
  width: 30%;
  padding: 5px;
}
.today-item p {
  font-size: 40px;
}
.orderdata,
.dealdata {
  margin-top: 20px;
  width: 100%;
  background-color: #fff;
}
.entrance {
  height: 270px;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: start;
}
.entrance-item {
  width: 25%;
  height: 80px;
  font-size: 14px;
  text-align: center;
  padding-top: 30px;
  margin: 10px;
  background-color: #f9f9f9;
}
.entrance-item p {
  line-height: 20px;
}
.entrance-item:hover {
  border-bottom: 2px solid red;
}
.shopsort {
  background-color: #fff;
  margin-top: 20px;
  font-size: 14px;
}
.shopsort-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

.serial {
  display: inline-block;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  margin-right: 20px;
  border-radius: 50%;
  background-color: #f0f2f5;
}
.aaa div:nth-child(1) .serial {
  background-color: red;
  color: #fff;
}
.aaa div:nth-child(2) .serial {
  background-color: #ff5858;
  color: #fff;
}
.aaa div:nth-child(3) .serial {
  background-color: #ff9c9c;
  color: #fff;
}
</style>
